<style scoped lang="less">
    .preview-pdf {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        padding: 5px;
        // background: rgba(0, 0, 0, 0.8);
        background: #fff;

        .preview-content {
            height: 100%;
            overflow: scroll;
        }

        .close {
            position: fixed;
            top: 10px;
            right: 20px;
        }

        .foot {
            position: fixed;
            right: 20px;
            bottom: 10px;
            padding-top: 10px;
        }
    }
</style>

<template>
    <div class="preview-pdf"
         v-if="pdfDoc">
        <el-button class='close'
                   circle
                   icon="el-icon-close"
                   @click="onClosePage" />
        <div id="view-pdf"
             class="preview-content">
            <canvas id="the-canvas"></canvas>
        </div>
        <div class="foot">
            <el-button v-if="pageNum > 1"
                       class='left'
                       type="primary"
                       icon="el-icon-arrow-left"
                       @click="onPrevPage">
                上一页
            </el-button>
            <el-button v-if="pageNum < pdfDoc.numPages"
                       class='right'
                       type="primary"
                       icon="el-icon-arrow-right"
                       @click="onNextPage">
                下一页
            </el-button>

        </div>
    </div>
</template>

<script>
    import { Loading } from "element-ui";
    import PDFJS from "pdfjs-dist";

    export default {
        name: "preview-pdf",
        props: {},
        data() {
            return {
                pdfDoc: null,
                pageNum: 1,
                pageRendering: false,
                pageNumPending: null,
                scale: 1.8,
                loadingEl: null
            };
        },
        created() {
            window.addEventListener('resize', () => {

            })
        },
        mounted() {
        },
        methods: {
            show(url) {
                // /static/scrm.pdf
                this.loadingEl = Loading.service({
                    fullscreen: true
                });
                PDFJS.getDocument(url).then(pdf => {
                    this.pdfDoc = pdf;
                    this.renderPage(1);
                });
            },
            renderPage(num) {
                this.pageRendering = true;
                this.pdfDoc.getPage(num).then(page => {
                    let viewport = page.getViewport(this.scale);
                    console.log("renderPage >> ", this.scale, viewport)
                    let canvas = document.getElementById("the-canvas")
                    canvas.height = viewport.height
                    canvas.width = viewport.width

                    // 渲染PDF文件
                    let renderContext = {
                        canvasContext: canvas.getContext("2d"),
                        viewport: viewport
                    };
                    let renderTask = page.render(renderContext);

                    // 成功渲染
                    renderTask.promise.then(() => {
                        this.loadingEl.close();
                        this.pageRendering = false;
                        if (this.pageNumPending !== null) {
                            this.renderPage(this.pageNumPending);
                            this.pageNumPending = null;
                        }
                    });
                });
            },
            queueRenderPage(num) {
                if (this.pageRendering) {
                    this.pageNumPending = num;
                } else {
                    this.renderPage(num);
                }
            },
            onPrevPage() {
                if (this.pageNum <= 1) {
                    return;
                }
                this.pageNum--;
                this.queueRenderPage(this.pageNum);
            },
            onNextPage() {
                if (this.pageNum >= this.pdfDoc.numPages) {
                    return;
                }
                this.pageNum++;
                this.queueRenderPage(this.pageNum);
            },
            onClosePage() {
                this.pdfDoc = null;
                this.pageNum = 1
            }
        }
    };
</script>

